import StepHeader from "./comps/StepHeader";
import CartTableHeader from "./comps/CartTableHeader";
import CartTableFooter from "./comps/CartTableFooter";
import CartProItem from "./comps/CartProItem";
import CartProItemExpire from "./comps/CartProItemExpire";
import HttpUtils from "../common/utils/HttpUtils";
import urlHook from "../common/utils/urlHook";
import EventEmitterUtils from "../common/utils/EventEmitterUtils";
import ZenUI from "@root/components/ZenUI/ZenUI";
import Icon from "@ui/RJMart/icons";
import product from "../../../imgs/product-1.jpg";
import wenhao from "../../../imgs/wenhao.png";
import ic_cart from "@assets/ic_cart.png";
import "../common/css/commheader.css";
import "./cart.css";

// import Modal from '@ui/RJMart/modal'

export default class Cart extends React.Component {
    constructor() {
        super();
        // console.log(textId);
        this.state = {
            all_selected: false,
            is_for_header: false,
            cartInfo: null
        };
    }

    componentDidMount() {
        let _seft = this;
        this.getshopCartData();
        EventEmitterUtils.on("refreshCartData", () => {
            this.getshopCartData();
        });
    }

    componentWillUnmount() {
        EventEmitterUtils.off("refreshCartData");
        document.removeEventListener("scroll", this.checkScroll);
    }

    getshopCartData() {
        this.loadingCart();
    }

    checkScroll(e) {
        let footerRawOffsetTop = Cart.footerRawOffsetTop;
        let footerElement = Cart.footerElement;
        let currentScrollTop =
            (document.documentElement && document.documentElement.scrollTop) ||
            document.body.scrollTop;
        if (currentScrollTop > footerRawOffsetTop - 517) {
            if (Uts.hasClass(footerElement, "zen_ps-fix zen_b-0 zen_z-i-2")) {
                Uts.removeClass(footerElement, "zen_ps-fix zen_b-0 zen_z-i-2");
            }
        } else {
            if (!Uts.hasClass(footerElement, "zen_ps-fix zen_b-0 zen_z-i-2")) {
                Uts.addClass(footerElement, "zen_ps-fix zen_b-0 zen_z-i-2");
            }
        }
    }

    loadingCart() {
        let _seft = this;
        HttpUtils.loadingShopCart()
            .then(res => {
                if(res.code=='0000'){
                    this.setState(
                        {
                            cartInfo: res.shoppingCart
                        },
                        () => {
                            let totalHeight = 0;
                            let allCartListDom = document.querySelectorAll(
                                ".cart-pro-item"
                            );
                            let footerElement;
                            Cart.footerElement = document.querySelector(
                                ".cart-content-box-footer"
                            );
                            Cart.footerRawOffsetTop =
                                Cart.footerElement && Cart.footerElement.offsetTop;
                            // console.log(Cart.footerRawOffsetTop);
                            /*for (var i = allCartListDom.length - 1; i >= 0; i--) {
                                totalHeight += Number(
                                    allCartListDom[i].offsetHeight
                                );
                            }*/
                            let h =
                                window.innerHeight ||
                                document.documentElement.clientHeight ||
                                document.body.clientHeight;
                            if (
                                Cart.footerRawOffsetTop &&
                                Uts.getPS(Cart.footerElement).top > h
                            ) {
                                Uts.addClass(
                                    Cart.footerElement,
                                    "zen_ps-fix zen_b-0 zen_z-i-2"
                                );
                                document.addEventListener(
                                    "scroll",
                                    _seft.checkScroll
                                );
                            }
                        }
                    );
                }
                else{
                    ZenUI.ST(res.message,3)
                }

                console.log(res);
            })
            .catch(err => {
                this.setState({
                    cartInfo: []
                });
                console.log(err);
            });
    }

    render() {
        return (
            <div style={{ backgroundColor: "#fff", position: "relative" }}>
                {this.renderCenter()}
                <div style={{ height: 92 }} />

                <div className={"cart-footer-top-line"} />
            </div>
        );
    }

    renderCenter() {
        const { all_selected, is_for_header, cartInfo } = this.state;

        if (!cartInfo) {
            return null;
        }
        if (cartInfo && cartInfo.length == 0) {
            return <Empty />;
        }

        return (
            <div className={"cart-content-warpper"}>
                <div className={"cart-content-box"}>
                    <CartTableHeader
                        all_selected={all_selected}
                        onClick={() => {
                            this.setState({
                                all_selected: !all_selected
                            });
                            setTimeout(() => {
                                EventEmitterUtils.emit(
                                    "cartChoosedTotalCountChange",
                                    null
                                );
                            }, 100);
                        }}
                    />

                    {cartInfo.map((item, index) => (
                        <CartProItem
                            key={
                                global.hasLogin
                                    ? item.supplier.name
                                    : item.suppName
                            }
                            index={index}
                            item={item}
                            all_selected={all_selected}
                            is_for_header={is_for_header}
                            showAllSelected={() => {
                                this.setState({
                                    all_selected: true,
                                    is_for_header: true
                                });
                                setTimeout(() => {
                                    this.setState({
                                        is_for_header: false
                                    });
                                }, 300);
                            }}
                            hideAllSelected={() => {
                                this.setState({
                                    all_selected: false,
                                    is_for_header: true
                                });
                                setTimeout(() => {
                                    this.setState({
                                        is_for_header: false
                                    });
                                }, 300);
                            }}
                        />
                    ))}

                    {/*<div className={'cart-content-found'}>*/}
                    {/*<div className={'cart-content-found-p'}>*/}
                    {/*<img src={wenhao} alt=""/>*/}
                    {/*<p>找不到已添加的商品</p>*/}
                    {/*</div>*/}
                    {/*</div>*/}
                    <div style={{ height: 40 }} />

                    <CartTableFooter
                        all_selected={all_selected}
                        cartInfo={cartInfo}
                        onClick={() => {
                            this.setState({
                                all_selected: !all_selected
                            });
                        }}
                    />
                </div>
            </div>
        );
    }
}

class Empty extends React.Component {
    render() {
        return (
            <div className={"cart-content-warpper"}>
                <div className={"cart-content-box"}>
                    <div className={"cart-not-found-pro"}>
                        <img src={ic_cart} alt="" />
                        <div className={"cart-not-found-pro-empty"}>
                            <p
                                style={{
                                    color: "rgba(150, 150, 150, 1)",
                                    fontSize: 13
                                }}
                            >
                                您的购物车还是空的！
                            </p>
                        </div>
                        <div className={"cart-not-found-pro-tips"}>
                            <p>
                                您可以
                                <span
                                    onClick={() => {
                                        $state.go({
                                            stateName: "/"
                                        });
                                    }}
                                    className={"cart-not-found-pro-tips-span"}
                                >
                                    去采购
                                </span>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}
